<script>
import {defineComponent} from 'vue'
import WangEditor from "../../components/WangEditor.vue";
import {saveParsewebcontentApi} from "../../api/api";

export default defineComponent({
  name: "Edit",
  components: {WangEditor},
  data() {
    const saveBannerBtn = (v) =>  saveParsewebcontentApi(this.editorContent)
    return {
      imageUrl: '',
      radio: '1',
      editorContent: {
        webcontent: '<p>初始内容</p>'
      },
      editorConfig: {
        uploadFileName: 'file',

        // 自定义工具栏
        toolbarKeys: [
          'head', 'bold', 'italic', 'underline', 'strikeThrough',
          'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
          'emoticon', 'image', 'table'
        ]
      },
      saveBannerBtn
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
})
</script>

<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/banner/index'}">banner管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑banner</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="margin: 2% 0 0 2%">
      <div style="margin-bottom: 1.5%">展示位置：<el-select type="text" style="width: 30%;margin-left: 1%" size="small" placeholder="请选择">
        <el-option label="全部" value="1"></el-option>
      </el-select></div>
      <div style="margin-bottom: 1%">展示排序：<el-select type="text" style="width: 30%;margin-left: 1%" size="small" placeholder="未发布">
        <el-option label="全部" value=""></el-option>
      </el-select></div>
      <div style="text-align: center;width: 40%;font-size: 12px">设置展示排序，表示发布上线</div>
      <div style="display: flex"><span style="margin-top: 2%">banner:</span>
        <div><el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload></div></div>
      <div>跳转链接：<el-radio v-model="radio" label="1">自定义图文</el-radio></div>
      <div v-if="radio == 1">
        <WangEditor  v-model="editorContent.webcontent"
                     :editorHeight="'400px'"
                     :config="editorConfig"
                     style="width: 73%;margin-left: 5%;margin-top: 1.5%"/>
          <el-button type="primary" size="small" @click="saveBannerBtn" style="margin: 0 35%;">提交</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
